<template>
	<up-table
		:options="tableOptions"
		:data="dataList"
		:loading="loading"
		:isEmpty="isEmpty"
		:error="error">
		<template #user="{ data }">
			<account-user
				:userId="data.userId"
				:vip="data.vip"
				:userName="data.userName"
				:nickName="data.nickName"
				:toProfileTab="UpSwitchTabsEnum.slots" />
		</template>
		<template #game="{ data }">
			<div
				class="h-full flex items-center overflow-hidden"
				:class="data?.gameName ? 'cursor-pointer' : 'cursor-not-allowed'"
				@click="handleClick(data)">
				<div class="rounded-sm w-[24px] h-[24px] overflow-hidden flex items-center">
					<base-image
						:src="imgSrc(data)"
						:type="imgServer(data)"
						default="placeholder.svg"
						class="w-full"></base-image>
				</div>
				<span class="ml-2 h-full leading-[26px] overflow-hidden text-ellipsis whitespace-nowrap">
					{{ data?.gameName }}
				</span>
			</div>
		</template>
	</up-table>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { UpTable, TableOptions, UpSwitchTabsEnum } from '@/components/up'
import { BaseImage } from '@/components/base'
import { AccountUser } from '@/components/account'
import { liveBigReq } from '@/api/slots'
import { useRequest } from '@/hooks'
import { useRouter } from 'vue-router'
import { useSlotStore, useAppStore } from '@/store'

const slotStore = useSlotStore()
const router = useRouter()
const appStore = useAppStore()

const tableOptions: TableOptions[] = [
	{
		prop: 'game',
		slot: 'game',
		textT: 'slotsSlip.game',
		width: '25%'
	},
	{
		slot: 'user',
		textT: 'slotsSlip.owner',
		width: '15%'
	},
	{
		prop: 'betAmount',
		textT: 'slotsSlip.betAmount',
		type: 'amount',
		align: 'right'
	},
	{
		prop: 'multiplier',
		textT: 'slotsSlip.multiplier',
		type: 'multiplier',
		align: 'right'
	},
	{
		prop: 'payout',
		textT: 'slotsSlip.payOut',
		type: 'amount',
		align: 'right',
		class: 'text-success'
	}
]
const { run, data, loading, isEmpty, error } = useRequest<any>(liveBigReq, {
	pageSize: 10
})

const dataList = computed(() => {
	if (slotStore.liveBigDataList && slotStore.liveBigDataList.length) {
		return slotStore.liveBigDataList.map((item: any) => {
			return {
				...item,
				betAmount: item.betAmount
					? item.betAmount.toFixed(2)
					: (item.payout / item.multiplier).toFixed(2)
			}
		})
	}
	return []
})

const imgSrc = (data: any) => {
	if (data?.gameIcon) {
		return data?.gameIcon
	}
	if (data?.icon) {
		return data?.icon
	}
	return 'placeholder.svg'
}

const imgServer = (data: any) => {
	const imgString = imgSrc(data)
	if (imgString.indexOf('http') === 0) {
		return 'network'
	}
	if (imgString !== 'placeholder.svg') {
		return 'server'
	}
	return 'local'
}

const handleClick = (data: any) => {
	console.log(data.gameKey)
	if (!data?.gameKey) return
	router.push({
		name: 'SlotsDetail',
		params: {
			id: data.gameKey
		}
	})
}

const getListData = async () => {
	slotStore.setLiveBigWinnersList([])
	await run()
	slotStore.setLiveBigWinnersList(data.value)
}

watch(
	() => appStore.region,
	() => {
		getListData()
	}
)

getListData()
</script>
